﻿<script setup lang="ts" name="Barcode">
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import { getBarcodeList } from '@/api/barcode'

const route = useRoute()

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)

const initData: any = ref({})

const getInitData = () => {
  getBarcodeList(null, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res.data) {
      initData.value = res.data
      console.log(initData.value)
    }
  })
}
onMounted(() => {
  getInitData()
})
</script>

<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-alert title="基于 jsbarcode 实现条形码的封装，因条码类型不同其所支持的文本格式不同，这里只展示了code128类型条码。文本总长度，条间宽度都会影响条码的总长度，所以这两者的值设定需要注意。" type="success" :closable="false" show-icon />
    <el-row :gutter="systemConfig.space">
      <el-col v-for="(item, index) in initData" :key="index" :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
        <el-card shadow="hover">
          <barcode :tag="item.tagType" :text="item.text" :options="item.options"></barcode>
        </el-card>
      </el-col>
    </el-row>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.el-row {
  margin-top: calc(0px - var(--el-space));

  .el-col {
    margin-top: var(--el-space);

    .el-card {
      display: flex;
      height: 200px;

      :deep(.el-card__body) {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
